<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
		<meta name="description" content="">


		<title>Data Table</title>


		<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

		<!--icon font-->
		<link href="assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<link href="assets/vendor/dashlab-icon/dashlab-icon.css" rel="stylesheet">
		<link href="assets/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
		<link href="assets/vendor/themify-icons/css/themify-icons.css" rel="stylesheet">
		<link href="assets/vendor/weather-icons/css/weather-icons.min.css" rel="stylesheet">

		<!--custom scrollbar-->
		<link href="assets/vendor/m-custom-scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet">

		<!--jquery dropdown-->
		<link href="assets/vendor/jquery-dropdown-master/jquery.dropdown.css" rel="stylesheet">

		<!--jquery ui-->
		<link href="assets/vendor/jquery-ui/jquery-ui.min.css" rel="stylesheet">

		<!--iCheck-->
		<link href="assets/vendor/icheck/skins/all.css" rel="stylesheet">

		<!--data table-->
		<link href="assets/vendor/data-tables/dataTables.bootstrap4.min.css" rel="stylesheet">

		<!--custom styles-->
		<link href="assets/css/main.css" rel="stylesheet">
	</head>

	<body class="fixed-nav">
<div class="header"></div>
			<!--main content wrapper-->
		<div class="content-wrapper">

			<div class="container-fluid">

				<!--page title-->
				<div class="page-title mb-4 d-flex align-items-center">
					<div class="mr-auto">
						<h4 class="weight500 d-inline-block pr-3 mr-3 border-right">密码管理</h4>
						<nav aria-label="breadcrumb" class="d-inline-block ">
							<ol class="breadcrumb p-0">
								<li class="breadcrumb-item"><a href="index.html">主页</a></li>
								<li class="breadcrumb-item"><a href="#">密码管理</a></li>
								<!-- <li class="breadcrumb-item active" aria-current="page">Data Table</li> -->
							</ol>
						</nav>
					</div>
				</div>
				<!--/page title-->

				<div class="row">
					<div class="col-xl-12">
						<div class="card card-shadow mb-4">
							<div class="card-header border-0">
								<div class="custom-title-wrap bar-primary">
									<div class="custom-title">密码管理</div>
								</div>
							</div>
							<div class="card-body- pt-3 pb-4">
								<div class="table-responsive" style="font-size: 14px;">
									<table id="data_table" align="center" class="table table-bordered table-striped" cellspacing="0">
										<thead>
											<tr>

												<th>网站名称</th>
												<th>网址</th>
												<th>类型</th>
												<th>用户名</th>
												<th>密码</th>
												<th>手机号</th>
												<th>备注</th>
												<th>操作</th>
											</tr>
										</thead>
										<tfoot>
											<tr>

												<th>网站名称</th>
												<th>网址</th>
												<th>类型</th>
												<th>用户名</th>
												<th>密码</th>
												<th>手机号</th>
												<th>备注</th>
												<th>操作</th>
											</tr>
										</tfoot>

									</table>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

			<!--footer-->
			<footer class="sticky-footer">
				<div class="container">
					<div class="text-center">
						<small>蜀ICP备19040405号 <a href="http://www.beian.miit.gov.cn/" target="_blank">按是否十大十大</a></small>
					</div>


				</div>
			</footer>
			<!--/footer-->
		</div>
		<!--/main content wrapper-->

		<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/head.js"></script>
		<script>
			$(function() {
				$(".header").append(head);
				$.ajax({
					//请求方式
					type: "GET",
					//请求的媒体类型
					//请求地址
					xhrFields: {
						withCredentials: true
					},
					url: app.serviceurl + "website/findbyusername?username=1767821837",
					//请求成功
					success: function(result) {

						console.log(result)
						if (result.status == 0) {
							var data = [];
							for (let i = 0; i < result.msg.length; i++) {
								var resmsg = result.msg[i];
								var dataitem = {};
								for (let j = 0; j < resmsg.webinfos.length; j++) {
									var webinfo = resmsg.webinfos[j];
									dataitem.name = resmsg.name;
									dataitem.website = "<a target='_blank' href=http://" + resmsg.website + " >" + resmsg.website + "</a>";
									dataitem.type = resmsg.type;
									dataitem.username = webinfo.username;
									dataitem.password = webinfo.password;
									dataitem.phone = webinfo.phone;
									dataitem.reserve = (webinfo.reserve == null ? '' : webinfo.reserve);
									dataitem.操作 = "  <button type=\"button\" class=\"btn btn-info btn-sm  updatebtn \"  infoid='" + resmsg.id +
										"' >修改</button> <button infoid='" + resmsg.id +
										"' type=\"button\" class=\"btn btn-danger btn-sm btndelete\">删除</button>"
								}
								data.push(dataitem)
							}

							$('#data_table').dataTable().fnDestroy();
							$('#data_table').DataTable({
								data: data,

								columns: [{
										data: "name"
									},
									{
										data: "website"
									},
									{
										data: "type"
									},
									{
										data: "username"
									},
									{
										data: "password"
									},
									{
										data: "phone"
									},
									{
										data: "reserve"
									},
									{
										data: "操作"
									}

								]
							});



							$(".updatebtn").click(function() {

								alert(this.getAttribute("infoid"));

							//	弹出对话框 ，修改信
								//	息

							});
							$(".btndelete").click(function() {

								// 删除

							})

						}

					},
					//请求失败，包含具体的错误信息
					error: function(e) {


					}
				});

			})
		</script>
		<script src="assets/vendor/popper.min.js"></script>
		<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="assets/vendor/jquery-dropdown-master/jquery.dropdown.js"></script>
		<script src="assets/vendor/m-custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
		<script src="assets/vendor/icheck/skins/icheck.min.js"></script>

		<!--datatables-->
		<script src="assets/vendor/data-tables/jquery.dataTables.min.js"></script>
		<script src="assets/vendor/data-tables/dataTables.bootstrap4.min.js"></script>
		<!--init datatable-->



		<!--[if lt IE 9]>
        <script src="assets/vendor/modernizr.js"></script>
        <![endif]-->

		<!--basic scripts initialization-->
		<script src="assets/js/scripts.js"></script>
	</body>
</html>
